<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        li{
            list-style: none;
        }
        a{
            color: inherit;
            text-decoration: none;
        }
        .container{
            width: 1226px;
            margin: 50px auto;

            .grade-list{

                & table,& td,& th{
                    border: 1px solid #333;
                }
                & table{
                    width: 100%;
                    line-height: 45px;
                    text-align: center;
                    border-collapse: collapse;
                    font-size: 13px;
                }

            }
        }
    </style>
    <style>
		* {
			padding: 0;
			margin: 0;
		}

		li {
			list-style: none;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		.header {
			width: 1226px;
			margin: 0 auto;
			font-size: 13px;
			line-height: 50px;
		}

		.header .list {
			display: flex;
		}

		.header .list li {
			padding: 0 10px;
		}

		.site-nav-user {
			display: none;
		}

		.d-block {
			display: block;
		}

		.d-none {
			display: none;
		}

		.container {
			width: 1226px;
			margin: 0 auto;
		}

		.showGrade table {
			width: 100%;
			border-collapse: collapse;
			table-layout: fixed;
			text-align: center;
			line-height: 40px;
		}

		.showGrade table,
		.showGrade table td,
		.showGrade table th {
			border: 1px solid #333;
		}

		.shadow {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			display: none;
		}

		.shadow .form {
			background-color: #f6f6f6;
			width: 250px;
			padding: 20px;
		}

		.shadow .form .input-group {
			margin-bottom: 10px;
		}

		.shadow .form .input-group input {
			margin-left: 5px;
		}

		.shadow .form .input-group input:disabled {
			border: 0;
			color: #333;
		}

		/* 搜索 */

		.searchGrade {
			display: flex;
			margin-bottom: 10px;
			/* justify-content: space-between; */
		}

		.searchGrade>* {
			margin-right: 20px;
			line-height: 30px;
		}

		.searchGrade .searchBar {
			width: 300px;
			height: 29px;
			border: 1px solid #333;
			display: flex;
			overflow: hidden;
		}

		.searchGrade .searchBar .searchCon {
			border: none;
			outline: none;
			flex: 1;
			padding: 0;
			text-indent: 5px;
		}

		.searchGrade .searchBar .searchBtn {
			width: 60px;
			height: 30px;
			display: block;
			background-color: #999;
		}

		.searchGrade .orderColBar,
		.searchGrade .orderTypeBar {
			border: 1px dashed #999;
			padding: 0 20px;
		}

		.searchGrade label {
			margin-right: 10px;
		}

		.searchGrade select {
			height: 30px;
		}

		.searchGrade input[type="reset"] {
			height: 30px;
			width: 45px;
		}

		.pageBox {
			text-align: center;
			margin-top: 10px;
		}
	</style>
</head>
<body>
    <div class="container">
        <!-- onsubmit="return false" 阻止表单默认提交 -->
        <form class="searchGrade" onsubmit="return false">
			<div class="searchBar">
				<input type="text" class="searchCon">
				<a href="javascript:;" class="searchBtn"></a>
			</div>
			<div class="orderColBar">
				<!-- 排序的列名  -->
				<label>默认<input type="radio" name="col" class="orderCol" value="id" checked=""></label>
				<label>语文<input type="radio" name="col" class="orderCol" value="chinese"></label>
				<label>数学<input type="radio" name="col" class="orderCol" value="math"></label>
				<label>英语<input type="radio" name="col" class="orderCol" value="english"></label>
				<label>总分<input type="radio" name="col" class="orderCol" value="total"></label>
			</div>
			<div class="orderTypeBar">
				<!-- 排序的方式  asc => 升序 desc => 降序-->
				<label>升序<input type="radio" name="type" class="orderType" value="asc" checked=""></label>
				<label>降序<input type="radio" name="type" class="orderType" value="desc"></label>
			</div>
			<div class="showNumSelect">
				<select class="showNum">
					<option value="5" selected="">每页显示5条</option>
					<option value="10">每页显示10条</option>
					<option value="15">每页显示15条</option>
					<option value="20">每页显示20条</option>
				</select>
			</div>
			<input type="reset" value="重置">
		</form>
        <div class="grade-list">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2308</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a href="javascript:;">编辑</a>
                            <a href="javascript:;">删除</a>
                        </td>
                    </tr> -->
                </tbody>
                <!-- <tfoot></tfoot> -->
            </table>

        </div>
    </div>
</body>
<script>

    // var xhr = new XMLHttpRequest();
    
    // xhr.open("get","http://121.43.116.41/demo/php/searchAllGrade.php",true);

    // xhr.send();

    // xhr.onreadystatechange = function(){
    //     if(xhr.readyState == 4 && xhr.status == 200){
    //         var result = xhr.responseText;

    //         result = JSON.parse(result);
    //         console.log(result);
    //     }
    // }

</script>
<script>
    var tbody = document.querySelector(".grade-list table tbody");

    // 全局变量  => 记录搜索的参数
    var wd = ""; // 搜索关键词(默认查询所有)
    var col = "id";// 排序列名(默认按编号排序)
    var type = "asc"; // 排序方式(默认升序   desc:降序)
    var page = 1;  // 展示的页面(默认第一页)
    var size = 5;  // 每页展示多少条 


    // 页面加载时 查询成绩 排序和分页
    loadGrade();

    // get方式传参: 将参数数据队列拼接到请求地址后面,用"?"分隔
    // 参数数据队列: 键值对形式数据,数据之间用&分隔   (wd=&col=id&type=asc&page=1&size=10)

    /* var xhr = new XMLHttpRequest();

    // 参数定死
    // xhr.open("get","http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=&col=id&type=asc&page=1&size=10",true);
    // 变量拼接
    // xhr.open("get","http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd="+wd+"&col="+col+"&type="+type+"&page="+page+"&size="+size,true);
    xhr.open("get",`http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,true);

    xhr.send();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var result = xhr.responseText;

            result = JSON.parse(result);
            console.log(result);

            var {status,message,list} = result;
            // var status = result.status

            if(status){

                var html= "";
                list.forEach(({id,name,class:_class,chinese,math,english})=>{
                    html +=`<tr>
                        <td>${id}</td>
                        <td>${name}</td>
                        <td>${_class}</td>
                        <td>${chinese}</td>
                        <td>${math}</td>
                        <td>${english}</td>
                        <td>${chinese + math + english}</td>
                        <td>
                            <a href="javascript:;" data-index="${id}">编辑</a>
                            <a href="javascript:;" data-index="${id}">删除</a>
                        </td>
                    </tr>`
                })
                tbody.innerHTML = html;

            }else{
                alert(message);
            }
        }
    } */


    // 每次数据改变时 => 再次发送请求

    var form = document.querySelector("form");
    var showNumSel = document.querySelector(".showNum");

    form.onclick = function(e){
        var e = e || window.event;
        var target = e.target;

        if(target.className == "searchBtn"){
            var searchConInp = target.previousElementSibling;
            wd = searchConInp.value;
            loadGrade();
            
        }else if(target.className == "orderCol"){ // 单机单选 => 获取选中时的value值
            col = target.value; 
            loadGrade();
        }else if(target.className == "orderType"){ // 单机单选 => 获取选中时的value值
            type = target.value; 
            loadGrade();
        }else if(target.type == "reset"){
            
            wd = ""; // 搜索关键词(默认查询所有)
            col = "id";// 排序列名(默认按编号排序)
            type = "asc"; // 排序方式(默认升序   desc:降序)
            page = 1;  // 展示的页面(默认第一页)
            size = 5;  // 每页展示多少条 
            loadGrade();
            
        }
    }

    showNumSel.onchange = function(){
        size = this.value;
        loadGrade();
    }



    function loadGrade(){
        var xhr = new XMLHttpRequest();

        // 参数定死
        // xhr.open("get","http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=&col=id&type=asc&page=1&size=10",true);
        // 变量拼接
        // xhr.open("get","http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd="+wd+"&col="+col+"&type="+type+"&page="+page+"&size="+size,true);
        xhr.open("get",`http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,true);

        xhr.send();

        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var result = xhr.responseText;

                result = JSON.parse(result);
                console.log(result);

                var {status,message,list} = result;

                if(status){

                    var html= "";
                    list.forEach(({id,name,class:_class,chinese,math,english})=>{
                        html +=`<tr>
                            <td>${id}</td>
                            <td>${name}</td>
                            <td>${_class}</td>
                            <td>${chinese}</td>
                            <td>${math}</td>
                            <td>${english}</td>
                            <td>${chinese + math + english}</td>
                            <td>
                                <a href="javascript:;" data-index="${id}">编辑</a>
                                <a href="javascript:;" data-index="${id}">删除</a>
                            </td>
                        </tr>`
                    })
                    tbody.innerHTML = html;

                }else{
                    alert(message);
                }
            }
        } 
    }



</script>
</html>